<script setup lang="ts">
import { useUserStore } from '@/store/bannerList'
const userStore = useUserStore()
console.log(userStore.bannerList)
</script>
<template>
  <div id="title">
    <el-carousel class="banner" height="300px" trigger="click" indicator-position="none">
      <el-carousel-item v-for="(item, index) in userStore.bannerList" :key="index">
        <img :src="item.src" :alt="item.title" />
      </el-carousel-item>
    </el-carousel>
    <div class="message"></div>
  </div>
</template>

<style scoped>
#title {
  height: 300px;
  display: flex;
  justify-content: space-between;
  .banner {
    width: 40%;
    min-width: 400px;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    img {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .message {
    width: 40%;
    min-width: 400px;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
}
</style>
